<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>代码生成器 - 配置页</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="libs/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">

    <!-- 数据库配置 -->
    <div class="panel panel-primary">
        <div class="panel-heading">数据库连接配置</div>
        <div class="panel-body">
            <form @submit.prevent>
                <div class="form-group">
                    <label>数据库地址</label>
                    <input type="text" class="form-control" v-model="db.host" placeholder="localhost:3306/yourdb">
                </div>
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" class="form-control" v-model="db.username">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" class="form-control" v-model="db.password">
                </div>
                <div class="form-group">
                    <label>驱动类</label>
                    <input type="text" class="form-control" v-model="db.driver">
                </div>
                <button type="button" class="btn btn-success" @click="testConnection">测试连接</button>
            </form>
        </div>
    </div>

    <!-- 代码生成器配置 -->
    <div class="panel panel-info" style="margin-top:20px;">
        <div class="panel-heading">代码生成器配置</div>
        <div class="panel-body">
            <form @submit.prevent>
                <div class="form-group">
                    <label>mainPath</label>
                    <input type="text" class="form-control" v-model="config.mainPath">
                </div>
                <div class="form-group">
                    <label>包名 (package)</label>
                    <input type="text" class="form-control" v-model="config.packageName">
                </div>
                <div class="form-group">
                    <label>模块名 (moduleName)</label>
                    <input type="text" class="form-control" v-model="config.moduleName">
                </div>
                <div class="form-group">
                    <label>作者</label>
                    <input type="text" class="form-control" v-model="config.author">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input type="email" class="form-control" v-model="config.email">
                </div>
                <div class="form-group">
                    <label>表前缀 (tablePrefix)</label>
                    <input type="text" class="form-control" v-model="config.tablePrefix">
                </div>
                <button type="button" class="btn btn-primary" @click="saveConfig">保存配置到浏览器</button>
            </form>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            db: JSON.parse(localStorage.getItem('dbConfig')) || {
                host: 'localhost:3306/yourdb',
                username: 'root',
                password: '1234',
                driver: 'com.mysql.cj.jdbc.Driver'
            },
            config: JSON.parse(localStorage.getItem('codeConfig')) || {
                mainPath: 'cn.eleven',
                packageName: 'cn.eleven.com',
                moduleName: 'member',
                author: 'eleven',
                email: '3641630865@qq.com',
                tablePrefix: 'ums_'
            }
        },
        methods: {
            saveConfig() {
                localStorage.setItem('dbConfig', JSON.stringify(this.db));
                localStorage.setItem('codeConfig', JSON.stringify(this.config));
                alert('配置已保存到浏览器！');
            },
            testConnection() {
                axios.post('/generator/testDb', this.db)
                    .then(res => {
                        alert(res.data.msg || '未返回msg字段');
                    })
                    .catch(err => {
                        alert('数据库连接失败: ' + err);
                    });
            }
        }
    });
</script>
</body>
</html>
